<template>
  <div class="treeBox">
    <p>目录树管理----切换图层</p>
    <el-tree
      :data="data.treList"
      :props="data.defaultProps"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script setup>
import { reactive, toRaw  } from "vue"
import { loadModules } from 'esri-loader'
import { useStore } from "vuex";
const { state } = useStore();
const option = {
  url: 'https://js.arcgis.com/4.28/init.js',
  css: 'https://js.arcgis.com/4.28/esri/themes/light/main.css'
}
const handleNodeClick = async (data) => {
  console.log(data.layerUrl)
  if (data.layerUrl) {
    const [TileLayer] = await loadModules(["esri/layers/TileLayer"], option)
    const layer = new TileLayer({
      url: data.layerUrl
    })
    const viewMap = toRaw(state.mapViews) // 把map对象存进了store里面共享数据, toRaw 能将响应式对象转换为普通对象。
    viewMap.map.add(layer)
  }

}

const data = reactive({
  treList: [
    {
      label: '暖色系',
      layerId: 'layerId',
      layerUrl: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer',
      children: [
        {
          label: 'Level two 1-1'
        },
      ],
    },
    {
      label: '灰色系盒子',
      children: [
        {
          label: '灰色系',
          layerId: 'layerId',
          layerUrl: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer',
        }
      ],
    },
    {
      label: '蓝色系盒子',
      children: [
        {
          label: '蓝色系盒子1',
          children: [
            {
              label: '蓝色系',
              layerId: 'layerId',
              layerUrl: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
            },
          ],
        },
        {
          label: '我是配置的地图',
          children: [
            {
              label: '我是配置的地图1',
              layerId: 'layerId',
              layerUrl: 'https://services3.arcgis.com/4MALbzcKZ6tNTFMI/arcgis/rest/services/XZQHProvince_WebMokatuo/FeatureServer'
            },
          ],
        },
      ],
    },
  ],
  defaultProps: {
    children: 'children',
    label: 'label',
  }
})
</script>

<style lang="scss" scoped>
.treeBox {
  position: absolute;
  left: 8%;
  top: 5%;
  padding: 20px;
  width: 200px;
  height: 300px;
  background: #fff;
}
</style>